import React from 'react'
import ReactDOM from 'react-dom'
import './index.scss'

const _MOCK_DATA = [
  {
    label: 'A',
    value: ["Alberich's Pointed Hat", 'Albinauric Mask', 'All-Knowing Helm', 'Aristocrat Hat', 'Aristocrat Headband', 'Astrologer Hood', 'Ash-of-War Scarab', "Azur's Glintstone Crown"],
  },
  {
    label: 'B',
    value: ['Bandit Mask', 'Banished Knight Helm', 'Beast Champion Helm', 'Black Knife Hood', 'Blackflame Monk Hood', 'Bloodhound Knight Helm', 'Bloodsoaked Mask', 'Blue Cloth Cowl',"Briar Helm","Bull-Goat Helm"],
  },
  {
    label: 'C',
    value: ["Carian Knight Helm","Chain Coif","Cleanrot Helm","Champion Headband","Commoner's Headband","Confessor Hood","Crimson Hood","Crucible Axe Helm","Crucible Tree Helm",],
  },
]

const App = () => (
  <div className='demo'>
    <h4>同一个父元素</h4>
    {_MOCK_DATA.map((i) => (
      <>
        <h6>{i.label}</h6>
        <ul>
          {i.value.map((j) => (
            <li key={j}>{j}</li>
          ))}
        </ul>
      </>
    ))}
    <h4>不同的父元素</h4>
    {_MOCK_DATA.map((i) => (
      <div key={i.label}>
        <h6>{i.label}</h6>
        <ul>
          {i.value.map((j) => (
            <li key={j}>{j}</li>
          ))}
        </ul>
      </div>
    ))}
  </div>
)

export default ReactDOM.render(<App />, document.querySelector('#root'))
